<template>
  <div>
    <el-dialog
      title="输入员工信息"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-form class="form" ref='form' label-width="120px" :model="form" :rules='rules'>
        <el-form-item label="登录账号：" prop='account'>
          <el-input type="text" placeholder="输入登录账号" v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="登录名称：" prop='name'>
          <el-input type="text" placeholder="输入用户名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="登录密码：" prop='pwd'>
          <el-input type="password" placeholder="请输入6位以上数字与字母组合" v-model="form.pwd"></el-input>
        </el-form-item>
        <el-form-item align='right'>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="confirm">{{ openType === 'add' ? '确认' : '修改' }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'blueimp-md5'

export default {
  name: 'u-addRoleDialog',

  props: ['openType'],

  data() {
    return {
      dialogVisible: false,
      aStaffId: '',
      form: {
        account: '',
        name: '',
        pwd: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { max: 18, min: 2, message: '长度为 2 - 18 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { max: 18, min: 2, message: '长度为 2 - 18 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { max: 18, min: 6, message: '请输入6-18位以上数字与字母组合', trigger: 'blur' }
        ]
      },
      ifRequesting: false
    }
  },

  methods: {

    showSetPwdBox() {
      this.dialogVisible = true
    },

    confirm() {
      if (this.ifRequesting) return
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.request()
      })
    },

    async request() {
      this.ifRequesting = true
      const openType = this.openType === 'add'
      const form = this.form
      const { code, data } = await this.$api[openType ? 'firmCreateStaff' : 'firmUpdateStaff']({
        aFirmId: this.aFirmId,
        aLoginName: form.account,
        aStaffName: form.name,
        aPassword: md5(form.pwd),
        aIsAdmin: 0,
        aStaffId: this.aStaffId || ''
      })
      this.ifRequesting = false
      if (code === 0) {
        this.dialogVisible = false
        this.__notify(openType ? '添加员工' : '修改员工信息')
        this.$emit('close', true, openType ? data.staff_id : '')
      }
    },

    reset() {
      if (!this.$refs.form) return false
      this.$refs.form.resetFields()
    },

    handleClose() {
      this.dialogVisible = false
      this.$emit('close')
    },

    async getUserInfo(aStaffId) {
      const { code, data } = await this.$api.firmGetStaffInfo({ aStaffId })
      if (code === 0) {
        this.form.account = data.login_name
        this.form.name = data.staff_name
      }
    },

    async __show(type, aStaffId) {
      this.reset()
      if (type === 'modify') {
        await this.getUserInfo(aStaffId)
        this.aStaffId = aStaffId
      }
      this.dialogVisible = true
    }
  }
}
</script>

<style lang='less'>

</style>